<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="html5rush.binding.js"></script>
		<script src="jquery-1.6.4.min.js"></script>
		<title>Test</title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="400" >0</canvas>	
		
		<img id="runner" src="runner.png" style="display:none" />
		<pre id="out">Out:</pre>	
		<script type="text/javascript">
			function testAmount(){
				out("<hr/>testAmount");
				var a=new Amount().value(12);
				var b=new Amount().value(10);
				var c=a.more(b);
				out(c.value());
				b.value(100);
				out(c.value());
				out("done<hr/>");
				}
			function testCalculation(){
				out("<hr/>testCalculation");
				var tFahrenheit = new It().value(0.0);
				var tCelsius = new It().value(0.0);
				var c=new Calculation(tFahrenheit, tCelsius);
				c.calculateFirst=function() {
					return tCelsius.value * 9.0 / 5.0 + 32.0;
				    };
				c.calculateSecond=function() {
					return (tFahrenheit.value - 32) * 5.0 / 9.0;
				    };
				out("let tFahrenheit=100");
				tFahrenheit.value(100.0);
				out("now tFahrenheit: " + tFahrenheit.value() + ", tCelsius: " + tCelsius.value());
				out("let tCelsius=100");
				tCelsius.value(100.0);
				out("now tFahrenheit: " + tFahrenheit.value() + ", tCelsius: " + tCelsius.value());
				out("done<hr/>");
				}	
			function testText(){
				out("<hr/>testText");
				//var a = new Text().value("A").append("!");
				//var b = new Text().value("B").append(a);
				//out(a.value()+"/"+b.value());
				//out(a);
				out("done<hr/>");
				}	
			function testToggle(){
				out("<hr/>testToggle");
				out("/boolean, a is true, b is true, c bind true and b or a");
				var a = new Toggle().value(true);
				var b = new Toggle().value(true);
				var c = new Toggle().value(true).and(b).or(a);
				out("c is " + c.value());
				out("/let b = false");
				b.value(false);
				out("c is " + c.value());
				out("/let a = false");
				a.value(false);
				out("c is " + c.value());
				out("/strings, let cc bind aa equals bb");
				var aa = new Text().value("cc");
				var bb = new Text().value("bb");
				var cc = new Toggle().equals(aa, bb);
				out("cc is " + cc.value());
				out("/let bb = cc");
				bb.value("cc");
				out("cc is " + cc.value());
				out("/number, let c2 bind a2 less b2");
				out("/let a2 = 100, b2 = 200");
				var a2 = new Amount().value(100);
				var b2 = new Amount().value(200);
				var c2 = new Toggle().less(a2, b2);
				out("c2 is " + c2.value());
				out("/let b2 = 0");
				b2.value(0);
				out("c2 is " + c2.value());
				out("done<hr/>");
				}	
			function testFork(){
				out("<hr/>testFork");
				out("<15");
				out("/let n = -10");
				var n=new Amount().value(-10);
				//var tgl=new Toggle().less(n, 11);			
				var fork=new Fork()
					.condition(new Toggle().less(n, 15))
					.then("Frost")
					.otherwise(new Fork()
					    .condition(new Toggle().less(n, +15))
					    .then("Cold")
					    .otherwise(new Fork()
						.condition(new Toggle()
						.less(n, +30)).then("Warm")
						.otherwise("Hot")));						
				var r=new Text().bind(fork);
				out("now "+r.value());
				out("/let n = +10");
				n.value(10);
				out("now "+r.value());
				out("/let n = +20");
				n.value(20);
				out("now "+r.value());
				out("/let n = +40");
				n.value(40);
				out("now "+r.value());
				out("done<hr/>");
				}	
			function testBinding(){	
				out("<hr/>testBinding");
				var a = new It().value("A");
				var b = new It().value("B");
				var c = new It().value("C");
				a.afterChange=function(){out("!a.changed to "+this.value());};
				b.afterChange=function(){out("!b.changed to "+this.value());};
				c.afterChange=function(){out("!c.changed to "+this.value());};
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#bind variables");
				a.bind(b);
				b.bind(c);
				c.bind(a);
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#let a=D");
				a.value("D");
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#a unbind b");
				a.unbind(b);
				out("#let a=E");
				a.value("E");
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#let b=F");
				b.value("F");
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#a unbind c");
				a.unbind(c);
				out("#let a=G");
				a.value("G");
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("#let b=H");
				b.value("H");
				out("a: " + a.value() + ", b: " + b.value() + ", c: " + c.value());
				out("done<hr/>");
				}
			function out(msg){
				document.getElementById('out').innerHTML=document.getElementById('out').innerHTML+"\n"+new Date()+": "+msg;
				}	
			function debug(msg){
				if(!production)out("debug: "+msg);
				}
			function dump(object){
				var r="";
				for(var i in object)r=r+"\n"+i+": "+object[i];
				out (object.prototype+": "+r);
				}	
			function initAll(){
				/*var canvas=document.getElementById('canvas');
				var context2D=canvas.getContext('2d');	
				canvas.onclick=function(e){
					x = event.pageX - canvas.offsetLeft,
					y = event.pageY - canvas.offsetTop;
					alert(x+"/"+y);
					//alert(e.pageX+"/"+e.pageY);
					};*/
				/*$("#canvas").click(function(e){
					alert(e.pageX+"/"+e.pageY);
					}); */
				//context2D.fillStyle="#eeeeee";		
				//context2D.fillRect(0,0,500,500);
				//testBinding();
				//testText();
				//testCalculation();
				//testAmount();
				//testToggle();
				//testFork();
				var xx=new Amount().value(10);
				var ff=new It().value("#00ff00");				
				var c=new Canvas();
				//var ttt=new Text().value("---");
				/*var s=new Text().value("over ")
					.append(c.overX.asText())
					//.append(ttt)
					.append("x")
					.append(c.overY.asText())
					;*/
				//c.overX.asText();
				//alert(s.value());
				//var tt=new Text().bind(s);
				//alert(s.value());
				c.attach('canvas').delay(50)
					.child(new SolidRectangle()
						.width(800)
						.height(400)
						.x(0)
						.y(0)
						.fill("#cccccc")
						)
					.child(new LinearGradientRectangle()
						.width(150)
						.height(100)
						.x(c.overX)
						.y(c.overY)
						.distanceX(0.5)
						.distanceY(0)
						.point(new ColorPoint().distance(0).color("#ff0000"))
						.point(new ColorPoint().distance(1).color("#00ff00"))
						)
					.child(new Glyph()
						.x(10)
						.y(0)
						.fill("#ff0000")
						.text(new Text().value("over ").append(c.overX.asText()).append("x").append(c.overY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12)
						.fill("#ff0000")
						.text(new Text().value("down ").append(c.downX.asText()).append("x").append(c.downY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12*2)
						.fill("#ff0000")
						.text(new Text().value("click ").append(c.clickX.asText()).append("x").append(c.clickY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					/*.child(new Glyph()
						.x(10)
						.y(12*3)
						.fill("#ff0000")
						.text(new Text().value("up ").append(c.upX.asText()).append("x").append(c.upY.asText()))
						.font("Bold 10px Sans-Serif")
						)*/
					.child(new Picture()
						.x(250)
						.y(50)
						.attach("runner")
						)
					;
				//alert(s.value());
				c.startRenderLoop();
				//c.render();
				//c.render();
				//var c2=new Canvas().attach('canvas2');
				//c2.render();
				//var c3=new Canvas().attach('canvas3');
				//c2.delay=200;
				//c3.delay=700;
				//c3.render();
				c.onClick=function(){
					//alert("!");
					//xx.value(xx.value()+1);
					//ff.value("#0000ff");
					//c.render();
					//ttt.value("qqqqq");
					//alert("!");
					};
				//c2.onClick=function(){c2.render();};
				//c3.onClick=function(){c3.render();};
					//alert(c.pressX+"/"+c.pressY);};
				//c2.ref.width=200;
				out("initialized");
				}
			/*$(document).ready(function(){
				initAll();
				});*/
			document.ready=function(){
				initAll();
				};
		</script>
	</body>
</html>
